<template>
  <div id="index">
    <div id="container" class="app-container">

      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
        <div class="product-div">
          <div class="product-header">
            <em style="font-size: 20px">1.基本信息</em>
          </div>
          <el-form-item label="店铺名称" prop="platformName" width="400px" style="display:inline-block;">
            <el-input v-model="form.platformName" placeholder="请输入店铺名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="主营品类" prop="mainCategory" width="400px" style="display:inline-block;">
            <el-select v-model="form.mainCategory" placeholder="请主营品类" clearable size="small" filterable>
              <el-option v-for="dict in codeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="企业名称" prop="companyName" width="400px" style="display:inline-block;">
            <el-input v-model="form.companyName" placeholder="请输入企业名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="店铺地址" prop="region" width="400px" style="display:inline-block;">
            <el-cascader ref="cascaderAddr" v-model="form.region" :options="options" clearable filterable
              class="input-rule"></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="platformAddress" width="400px" style="display:inline-block;">
            <el-input v-model="form.platformAddress" placeholder="请输入详细地址" clearable></el-input>
          </el-form-item>
          <el-form-item label="商家电话" prop="servePhone" width="400px" style="display:inline-block;">
            <el-input v-model="form.servePhone" placeholder="请输入商家电话" clearable maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="店铺logo" prop="platformLogUrl">
            <imageArray style="width:500px" :imageStr.sync="form.platformLogUrl" :key="form.platformLogUrl"
              :msg="'图片要求：宽高相等且大于400px，大小2M内。'" :limit="1"></imageArray>
          </el-form-item>

          <el-form-item label="店铺描述" prop="platformRemark">
            <el-input :rows="5" type="textarea" placeholder="请输入店铺描述" v-model="form.platformRemark"
              style="width: 350px">
            </el-input>
          </el-form-item>
        </div>

        <div class="product-div-two">
          <div class="product-header">
            <em style="font-size: 20px">2.联系方式</em>
          </div>
          <el-form-item label="入驻联系人" prop="contactPerson" width="400px" style="display:inline-block;">
            <el-input readonly="readonly" v-model="form.contactPerson" placeholder="请输入入驻联系人" clearable></el-input>
          </el-form-item>
          <el-form-item label="入驻人电话" prop="platformPhone" width="400px" style="display:inline-block;">
            <el-input readonly="readonly" v-model="form.platformPhone" placeholder="请输入驻人电话" clearable></el-input>
          </el-form-item>
          <el-form-item label="入驻人邮箱" prop="platformEmail" width="400px" style="display:inline-block;">
            <el-input v-model="form.platformEmail" placeholder="请输入入驻人邮箱" clearable></el-input>
          </el-form-item>
        </div>

        <div class="product-div-three">
          <div class="product-header">
            <em style="font-size: 20px">3.其他信息</em>
          </div>
          <el-form-item label="售后说明" prop="orderService">
            <el-input :rows="5" type="textarea" placeholder="售后说明" v-model="form.orderService" style="width: 350px">
            </el-input>
          </el-form-item>
          <el-form-item label="分享文案" prop="platformText">
            <el-input v-model="form.platformText" placeholder="请输入分享文案" clearable style="width: 554px;" />
          </el-form-item>
          <el-form-item label="分享图片" prop="platformImage">
            <imageArray style="width:500px" :imageStr.sync="form.platformImage" :key="form.platformImage"
              :msg="'图片要求：宽400px,高500px，大小2M内。'" :limit="1"></imageArray>
          </el-form-item>
        </div>

      </el-form>
      <div class="dw">
        <el-button type="primary" @click="submitForm" style="margin-left: 750px;margin-top: 10px;">保存</el-button>
        <el-button @click="colsePro">返回</el-button>
        <el-button v-if="0 > 1" @click="saveForm">保存草稿</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getRegion
  } from '@/api/common/regin'
  import imageArray from "@/components/ImageUpload/imageArray";
  import {
    listStoreInfo,
    getInfo,
    delInfo,
    addInfo,
    updateInfo,
    updateStoreInfo
  } from "@/api/platform/info";
  export default {
    components: {
      imageArray,

    },
    data() {
      return {
        roleRule: 0,
        // th 值；动态控制 th 标题、批量设置
        //规格名称和的值, 组件里面可以添加规格名称和值
        specData: [],
        //根据名称和值,计算出table数据,笛卡尔积
        specTable: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 地区信息
        options: [],
        // 更多的下拉
        displayBool: 0,
        // 查询参数
        queryParams: {},
        columns: [],
        // 表单参数
        form: {},
        property: [],
        propertyUid: [],
        // 表单校验
        rules: {
          platformName: [{
            required: true,
            message: "店铺不能为空",
            trigger: "blur"
          }],
          mainCategory: [{
            required: true,
            message: "主营品类不能为空",
            trigger: "blur"
          }],
          platformEmail: [{
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }],
          servePhone: [{
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }]
        },
        datas: [],
        tables: [],
        codeOptions: [],
      };
    },
    created() {
      this.getDicts("platform_trade_code").then(response => {
        this.codeOptions = response.data;
      });
      // 产地
      getRegion().then((response) => {
        this.options = response.data;
      });
      getInfo().then((response) => {
        this.form = response.data
        this.form.region = response.regin;
      });
    },
    methods: {
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },
      divShow(obj) {
        this.displayBool = obj;
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.options) {
              if (this.$refs['cascaderAddr'] != null) {
                let areaName = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels
                if (this.form.region) {
                  this.form.platformProvince = areaName[0];
                  this.form.platformCity = areaName[1];
                  this.form.platformArea = areaName[2];
                }
              }
            }
            updateStoreInfo(this.form).then(respone => {
              this.msgSuccess("修改成功");
            });
          }
        });
      },
      colsePro() {
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push({
          path: "/index",
          query: {
            t: Date.now()
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  #container {
    width: 100%;
    height: 50%;
  }

  #photo {
    float: left;
    width: 70%;
  }

  #content {
    float: right;
    width: 30%;
  }

  .product-header {
    position: absolute;
    top: 0;
    width: 600px;
    padding: 18px;
    background-color: #fff;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 40px;
  }

  .product-div {
    background-color: #fff;
    position: relative;
    padding-right: 16px;
    padding-top: 54px;
    border: 1px solid #ebebeb;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 1200px;
    margin: auto;
    top: 20px;
    bottom: -20px;
    margin-bottom: 50px;
  }

  .product-div-two {
    background-color: #fff;
    position: relative;
    padding-right: 16px;
    padding-top: 54px;
    border: 1px solid #ebebeb;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 1200px;
    margin: auto;
    top: 20px;
    bottom: -20px;
    margin-bottom: 60px;
  }

  .product-div-three {
    background-color: #fff;
    position: relative;
    padding-right: 16px;
    padding-top: 54px;
    border: 1px solid #ebebeb;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 1200px;
    margin: auto;
    top: 20px;
    bottom: -20px;
    margin-bottom: 100px;
  }

  .place-font {
    color: #999;
    font-size: 13px;
    position: relative;
  }

  .dw {
    border: 1px;
    position: fixed;
    bottom: 0px;
    background-color: #f2f6fc;
    width: 100%;
    height: 55px;
  }

  .div-img {
    display: none;
  }

  .div-text {
    margin: 22px 0px 12px 120px;
    color: #2656bd;
    cursor: pointer;
    font-size: 13px;
  }
</style>
